<!-- 价格更新 -->
<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="ruleForm.id === 0 ? '新增食材' : '编辑食材'"
      width="500"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 400px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="更新日期:">
            <div>{{ dayjs(ruleForm.updateTime).format("YYYY-MM-DD") }}</div>
          </el-form-item>
          <el-form-item label="批发价:" prop="wholePrice">
            <el-input v-model="ruleForm.wholePrice" placeholder="请输入批发价" clearable />
          </el-form-item>
          <el-form-item label="零售价:" prop="sellPrice">
            <el-input v-model="ruleForm.sellPrice" placeholder="请输入零售价" clearable />
          </el-form-item>
          <el-form-item label="采购价:" prop="purchasePrice">
            <el-input v-model="ruleForm.purchasePrice" placeholder="请输入采购价" clearable />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { foodsPriceAdd, foodsPriceEdit } from "@/api/diet/food/food";
import { foodPriceAddParams } from "@/api/diet/food/type";
import dayjs from "dayjs";

const dialogVisible = ref(true);

// 父组件传过来的id
const props = defineProps({
  priceId: Number,
  listData: Object,
});

const ruleForm = reactive<foodPriceAddParams>({
  id: 0,
  foodId: 0,
  wholePrice: "",
  sellPrice: "",
  purchasePrice: "",
  updateTime: "",
});
Object.assign(ruleForm, props.listData);

// 添加
const submitForm = async () => {
  await foodsPriceAdd(ruleForm);
  ElMessage.success("添加成功");
  emit("closePrice");
};

// 编辑
const upData = async () => {
  await foodsPriceEdit(ruleForm);
  ElMessage.success("修改成功");
  emit("closePrice");
};

const submit = async () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      ruleForm.id === 0 ? await submitForm() : await upData();
    }
  });
};

// 表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<foodPriceAddParams>>({
  wholePrice: [{ required: true, message: "请输入批发价", trigger: "blur" }],
  sellPrice: [{ required: true, message: "请输入零售价", trigger: "blur" }],
  purchasePrice: [{ required: true, message: "请输入采购价", trigger: "blur" }],
});

// 关闭弹框
const emit = defineEmits(["closePrice"]);
const handleClose = () => {
  emit("closePrice");
};

onMounted(() => {
  ruleForm.foodId = props.priceId;
  let dataTime = new Date().toLocaleString();
  ruleForm.updateTime = dayjs(dataTime).format("YYYY-MM-DD HH:mm:ss");
});
</script>

<style scoped lang="less"></style>
